<template>
    <div style="height:100%">
        <z-paging ref="Zpaging" v-model="list" @query="getList" :refresher-enabled="false" :fixed="false" :height="'100%'">

            <view class="index_manage">
                <div class="region_div">
                    <div class="left">
                        <picker :value="searchForm.areaKey" :range="options.area" range-key="areaName"
                            @change="(data) => pickerChange('area', data)">
                            <image class="icon_1" mode="aspectFit"
                                src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_8.png" />
                            <div class="txt">{{ searchForm.areaName }}</div>
                            <image class="icon_2" mode="aspectFit"
                                src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_7.png" />
                        </picker>
                    </div>
                    <!-- <image class="right" mode="aspectFit"
                        src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_58.png" /> -->
                </div>
                <div class="nums_div">
                    <div class="title">
                        <div class="p_1">电表设备</div>
                        <div class="p_2" @click="$comFun.openWin('/pages/index/add_device')">
                            <image class="icon" mode="aspectFit"
                                src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_19.png" />添加设备
                        </div>
                    </div>
                    <div class="li">
                        <div class="p_1">{{ statisticsData ? statisticsData.totalDevice : 0 }}</div>
                        <div class="p_2">总录入设备(台)</div>
                    </div>
                    <div class="li">
                        <div class="p_1">{{ statisticsData ? statisticsData.totalOnlineDevice : 0 }}</div>
                        <div class="p_2">运行中(台)</div>
                    </div>
                    <div class="li">
                        <div class="p_1">{{ statisticsData ? statisticsData.totalTenant : 0 }}</div>
                        <div class="p_2">合作客户(人)</div>
                    </div>
                </div>
                <div class="tabs_div">
                    <div class="li">
                        <picker :value="searchForm.linkStatusKey" :range="options.linkStatusStat" range-key="name"
                            @change="(data) => pickerChange('linkStatus', data)">
                            <div class="txt">通讯状态</div>
                            <image class="icon" mode="aspectFit"
                                src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_10.png" />
                        </picker>
                    </div>
                    <div class="li">
                        <picker :value="searchForm.switchStatusKey" :range="options.switchStatusStat" range-key="name"
                            @change="(data) => pickerChange('switchStatus', data)">
                            <div class="txt">合闸状态</div>
                            <image class="icon" mode="aspectFit"
                                src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_10.png" />
                        </picker>
                    </div>
                    <div class="li">
                        <picker :value="searchForm.abnormalStatusKey" :range="options.abnormalStatusStat" range-key="name"
                            @change="(data) => pickerChange('abnormalStatus', data)">

                            <div class="txt">异常状态</div>
                            <image class="icon" mode="aspectFit"
                                src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_10.png" />
                        </picker>
                    </div>
                    <image @click="openScreen" class="right_icon" mode="aspectFit"
                        src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_56.png" />
                </div>
                <div class="lis_div">
                    <div class="li" v-for="(li, key) in list" :key="key"
                        @click="$comFun.openWin('/pages/index/ammeter_info', { id: li.id })">
                        <div class="p_1">设备号：{{ li.name }}</div>
                        <div class="p_2">
                            <div class="yuan" :class="li.linkStatus=='online'?'':'yuan_red'"></div>
                            <!-- 1在线，0离线 -->
                            <div class="txt" :class="li.linkStatus=='online'?'':'txt_red'">{{ li.linkStatus=='online'?"在线":"离线" }}</div>
                            <!-- 1合闸  0断闸 -->
                            <div class="txt" :class="li.switchStatus==1?'':'txt_red'">{{ li.switchStatus==1?"合闸":"断闸" }}
                            </div>
                        </div>
                        <div class="p_5 p_5_1">剩余金额：¥ {{ li.balance }}</div>
                        <div class="p_5 p_5_1">用户名：{{ li.userName }}</div>
                        <div class="p_5">总用电量：{{ li.consumption }} KW·h</div>
                        <div class="p_5">房间：{{ li.area }}>{{ li.room }}</div>
                    </div>
                </div>
            </view>

        </z-paging>
        <div v-if="screenShow" class="screen_box">
            <div class="screen_div" :class="screenShow ? 'screen_div_animation' : ''">
                <div class="title">
                    <image @click="closeScreen" class="left_icon" mode="aspectFit" src="/static/back/dark.png" />
                    高级筛选
                </div>
                <div class="search">
                    <image class="icon" mode="aspectFill"
                        src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_52.png" />
                    <input class="inp" type="text" placeholder="请输入设备号或者用户名" placeholder-style="color:#bbb"
                        v-model="searchForm.name" @confirm="keywordConfirm">
                </div>
                <div class="lis">
                    <div class="p">电表状态</div>
                    <div class="li">
                        <div class="span" :class="searchForm.billType == li.id ? 'span_active' : ''"
                            v-for="(li, key) in options.billType" :key="key" @click="searchForm.billType = li.id">{{ li.name
                            }}</div>
                    </div>
                </div>
                <div class="lis">
                    <div class="p">入住状态</div>
                    <div class="li">
                        <div class="span" :class="searchForm.isEnter == li.id ? 'span_active' : ''"
                            v-for="(li, key) in options.isEnter" :key="key" @click="searchForm.isEnter = li.id">{{ li.name
                            }}</div>
                    </div>
                </div>
                <div class="btns">
                    <div class="pub_btn_normal pub_btn_normal_border" @click="closeScreen">取消</div>
                    <div class="pub_btn" @click="toScreen">查询</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list: [],
            screenShow: false,
            statisticsData: '',
            options: {
                area: [],//区域列表
                abnormalStatusStat: [],//异常统计
                linkStatusStat: [],//通讯统计
                switchStatusStat: [],//合闸状态
                billType: [{ id: '', name: "全部" }, { id: 2, name: "保电模式" }, { id: 1, name: "预付模式" }],//电表状态1：预付模式，2：保电模式
                isEnter: [{ id: '', name: "全部" }, { id: 2, name: "未入住" }, { id: 1, name: "入住" }],//入住状态：1：入住，2：未入住
            },

            searchForm: {
                areaId: '',//区域
                areaName: '全部',
                areaKey: 0,
                linkStatus: '',//通讯状态
                linkStatusName: '',
                linkStatusKey: 0,
                switchStatus: '',//合闸状态
                switchStatusName: '',
                switchStatusKey: 0,
                abnormalStatus: '',//异常状态
                abnormalStatusName: '',
                abnormalStatusKey: 0,

                isEnter: "",
                billType: "",
                name: ''
            },
        };
    },
    mounted() {
        this.initPage();

        const that = this;
        // uni.$off('addDeviceBack');
        // uni.$on('addDeviceBack', function (data) {
        //     // console.log(data);
        //     that.$refs.Zpaging.reload();
        // })

        // uni.$off('deviceUpdateBack_index');
        // uni.$on('deviceUpdateBack_index', function (data) {
        //     // console.log(data);
        //     that.$refs.Zpaging.reload();
        // })

        // uni.$off('areaUpdateIndex');
        // uni.$on('areaUpdateIndex', function (data) {
        //     that.getArea();
        //     if (that.searchForm.areaId) {
        //         that.searchForm.areaKey = 0;
        //         that.searchForm.areaId = '';
        //         that.searchForm.areaName = '全部';
        //         that.getStat();
        //         that.$refs.Zpaging.reload()
        //     }
        // })
    },
    methods: {
        initPage() {
            console.log('initPage');
            this.getArea();
            this.getStat();
            setTimeout(() => {
                this.$comFun.openLoading();
                this.$refs.Zpaging.reload()
            }, 400);
        },
        async getList(pageNum, pageSize) {
            let searchForm = {
                linkStatus: this.searchForm.linkStatus,
                switchStatus: this.searchForm.switchStatus,
                abnormalStatus: this.searchForm.abnormalStatus,
                areaId: this.searchForm.areaId,
                isEnter: this.searchForm.isEnter,
                billType: this.searchForm.billType,
                name: this.searchForm.name,
            }
            let data = {
                pageNum: pageNum,
                pageSize: pageSize,
            };
            const res = await this.$request.get('mobile/manager/device', {
                ...data,
                ...searchForm
            });
            this.$comFun.closeLoading();
            // console.log(res);
            if (res.code == 200) {
                this.$refs.Zpaging.complete(res.data.data);
            } else {
                this.$refs.Zpaging.complete(false);
            }
        },
        async getArea() {
            const res = await this.$request.get('mobile/manager/area', {
                pageNum: 1,
                pageSize: 100000,
            });
            // console.log(res);
            if (res.code == 200) {
                let arr = [{ areaId: "", areaName: "全部" }];
                this.options.area = arr.concat(res.data?.data || []);
                this.$forceUpdate();
            }
        },
        async getStat() {
            const res = await this.$request.get('mobile/manager/stat', {
                areaId: this.searchForm.areaId
            });
            // console.log(res);
            if (res.code == 200) {
                this.statisticsData = {
                    totalDevice: res.data.totalDevice,
                    totalOnlineDevice: res.data.totalOnlineDevice,
                    totalTenant: res.data.totalTenant,
                };
                let arr = [{ key: "", name: "全部" }];
                this.options.abnormalStatusStat = arr.concat(res.data.abnormalStatusStat || []);//异常统计
                this.options.linkStatusStat = arr.concat(res.data.linkStatusStat || []);//异常统计
                this.options.switchStatusStat = arr.concat(res.data.switchStatusStat || []);//异常统计
                this.$forceUpdate();
            }
        },
        pickerChange(type, e) {
            // console.log(type, e.detail.value);
            if (type == 'area') {
                this.searchForm.areaKey = e.detail.value;
                this.searchForm.areaId = this.options.area[e.detail.value].areaId;
                this.searchForm.areaName = this.options.area[e.detail.value].areaName;
                this.getStat();
            }
            if (type == 'linkStatus') {
                this.searchForm.linkStatusKey = e.detail.value;
                this.searchForm.linkStatus = this.options.linkStatusStat[e.detail.value].key;
                this.searchForm.linkStatusName = this.options.linkStatusStat[e.detail.value].name;
            }
            if (type == 'switchStatus') {
                this.searchForm.switchStatusKey = e.detail.value;
                this.searchForm.switchStatus = this.options.switchStatusStat[e.detail.value].key;
                this.searchForm.switchStatusName = this.options.switchStatusStat[e.detail.value].name;
            }
            if (type == 'abnormalStatus') {
                this.searchForm.abnormalStatusKey = e.detail.value;
                this.searchForm.abnormalStatus = this.options.abnormalStatusStat[e.detail.value].key;
                this.searchForm.abnormalStatusName = this.options.abnormalStatusStat[e.detail.value].name;
            }
            this.$comFun.openLoading();
            this.$refs.Zpaging.reload()
        },
        toScreen() {
            this.$comFun.openLoading();
            this.$refs.Zpaging.reload();
            this.closeScreen();
        },
        openScreen() {
            // that.form = that.$options.data.form;
            this.screenShow = true;
        },
        closeScreen() {
            this.screenShow = false;
        }
    },
};
</script>

<style lang="scss" scoped>
@import "@/common/css/index.scss";
</style>
